<template>
  <div>
    <!-- 首页-文章列表组件  只负责循环展示组件数据 -->

    <ArticleItem
     v-for="(item,index) in arr"
     :key="index"
     :item="item"
    @close="btn"></ArticleItem>
    <div>
      <van-action-sheet
      v-model="show"
      :actions="actions"
      @select="onSelect"
      get-container="body"
      cancel-text="取消"/>
    </div>
  </div>
</template>

<script>
import ArticleItem from '@/components/ArticleItem'
export default {
  data () {
    return {
      artId: null, // 文章的ID
      show: false, // 是否展示
      actions: [ // 当前反馈面板的数据
        { name: '不感兴趣' },
        { name: '反馈垃圾内容' },
        { name: '拉黑作者' }
      ],
      firstActions: [ // 一级反馈面板的数据
        { name: '不感兴趣' },
        { name: '反馈垃圾内容' },
        { name: '拉黑作者' }
      ],
      secondActions: [ // 二级反馈面板的数据
        {
          value: -1,
          name: '返回'
        },
        {
          value: 0,
          name: '其它问题'
        },
        {
          value: 1,
          name: '标题夸张'
        },
        {
          value: 2,
          name: '低俗色情'
        },
        {
          value: 3,
          name: '错别字多'
        },
        {
          value: 4,
          name: '旧闻重复'
        },
        {
          value: 6,
          name: '内容不实'
        },
        {
          value: 8,
          name: '侵权'
        },
        {
          value: 5,
          name: '广告软文'
        },
        {
          value: 7,
          name: '涉嫌违法犯罪'
        }
      ]
    }
  },
  props: {
    arr: Array
  },
  methods: {
    btn (artId) {
      this.show = true // 底部反馈面板出现
      this.artId = artId // 把点击x时传下来的item文章对象里的文章id存到data变量上
    },
    onSelect (action, index) { // 面板选择的事件
    // actions 绑定的是数据对象,而index绑定的是索引
      if (action.name === '反馈垃圾内容') { // 证明点击的是 反馈垃圾内容
        this.actions = this.secondActions
      } else if (action.name === '返回') {
        this.actions = this.firstActions
      } else {
        // 反馈开始
        this.$emit('action', action, this.artId)
        this.show = false
      }
    }
  },
  components: {
    ArticleItem
  }
}
</script>

<style scoped lang="less">

</style>
